<template>
  <div style="padding:0 0px">
    <van-nav-bar title="购物车" @click-left="back" left-arrow><van-icon name="ellipsis" slot="right" /></van-nav-bar>
    <div  v-show="flag" style=" padding: 0px 8px 0 8px;background-color:white">
      <van-notice-bar
        mode="closeable"
        style="border-radius:45rem;background-color:#fff7d2;"
        text="购物车中有一件商品已降价快去看看吧~~"
        left-icon="volume-o"
      />
      <van-row style="margin-top:20px">
        <van-col span="10">
          <van-checkbox class="fat" v-model="checked" @change="abab" />
          <van-image
            class="fat"
            width="45"
            height="20"
            src="//gfs11.gomein.net.cn/T18GDvB_hg1RCvBVdK.png"
          />
          <span class="fat" style>国美自营</span>
        </van-col>
        <van-col span="4"></van-col>
        <van-col span="10">
          <van-icon class="fat" color="#cbcbcb" name="info-o" size="20px"></van-icon>
          <span style="color:#6b6b6b;margin:0 10px" class="fat">运费说明</span>
          <span style="color:#f22067;padding:0 10px;border-left:1px solid #cbcbcb" class="fat">领卷</span>
        </van-col>
      </van-row>
      <van-checkbox-group class="card-goods" v-model="checkedGoods" @change="cg">
        <van-row
          style="margin-top:5px;background-color:white;border-radius:10%;box-shadow: 0 0 10px #efefef; "
          v-for="(item,index) in goods"
          :key="item.id"
        >
          <van-col span="2">
            <van-checkbox class="checkbox" :name="item.id"></van-checkbox>
          </van-col>
          <van-col span="22">
            <van-card
              style="padding:17px 8px 17px 11px;border-radius:20%;"
              :title="item.goods_name"
              :num="item.num"
              :thumb="item.image"
            >
            <div style="border-radius:10px;color:#f76395;margin-top:25px;border:1px solid #f76395;width:57px;padding:0 2px" slot="bottom">
              限购99件
            </div>
              <div slot="footer" style="margin-top:20px">
                <div
                  style="float:left;margin-left:140px;color:#f66495;font-size:18px"
                >￥{{item.price}}</div>
                <van-stepper
                  @change="step(gw[index].num,gw[index].id)"
                  style="z-index:9"
                  v-model="gw[index].num"
                />
              </div>
              <div slot="footer" style="margin-top:20px">
                <van-button size="small" style="float:left;border-radius:35%;color:#646a70">购买服务</van-button>
                <span style="padding-right:20px;color:#afb3b5">移入收藏</span>
                <span
                  style="padding-left:20px;border-left:1px solid #afb3b5;color:#afb3b5"
                  @click="deletes(item.id)"
                >删除</span>
              </div>
            </van-card>
          </van-col>
        </van-row>
      </van-checkbox-group>
      <van-submit-bar :disabled="bool" @submit="onSubmit" :price="sum" button-text="去结算">
        <div style="width:20px"></div>
        <van-checkbox v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <div style="padding:0 8px;background-color:white" v-show="!flag">
      <van-grid :column-num="1">
        <van-grid-item>
          <van-image
            style="width:186px;height:186px"
            src="//app.gomein.net.cn/plus/images/shop_cart/bj_baobei.png"
          />
          <span style="color:#999">购物车还是空的快去挑选商品吧</span>
          <van-button class="btn" to="/">先逛逛</van-button>
        </van-grid-item>
      </van-grid>
    </div>
    <van-row style="margin-bottom:45px">
      <van-row>
        <van-image width="100%" height="50" :src="img" />
      </van-row>
      <van-row style="margin:1rem 0.5rem 0">
          <van-grid :column-num="2" >
            <van-grid-item v-for="(item, index) in shangp" style="margin-top:10px;border:2px solid #f2f2f2" :key="index" @click="toGoodsDetail(item.id)">
              <a href="javascript:;">
                <van-image :src="item.image" />
              </a>
              <p class="namelegth" style="font-size:1rem; margin-top: 2px;">
                <van-tag plain type="danger">{{item.goods_name.substr(0,2)}}</van-tag>
                {{item.goods_name.slice(2)}}
              </p>
              <p>
                <em class="jiaspan" style="color: #f20c59;">￥{{item.price}}</em>
                <!-- <a href="/smiler" class="btn" >看相似</a> -->
               <span style="padding:5px;border:1px solid #f3f5f7"><van-icon name="cart-o" /></span>

              </p>
            </van-grid-item>
          </van-grid>
      </van-row>
    </van-row>
  </div>
</template>

<script>
import img from '../assets/image/ss.png'
export default {
  // watch: {
  //   checkedGoods: {
  //     deep: true,
  //     handler: function () {
  //       if (this.checkedGoods.length === this.goods.length) {
  //         this.checked = true
  //         localStorage.setItem('checked', 0)
  //       } else {
  //         this.checked = false
  //         localStorage.setItem('checked', 1)
  //       }
  //       localStorage.setItem('checkedGoods', JSON.stringify(this.checkedGoods))
  //     }
  //   }
  // },
  data () {
    return {
      checked: false, // 全选默认不选中
      checkedGoods: [], // 选中项
      goods: [], // 购物车商品
      gw: [], // 购物车id
      ids: [],
      num: 0,
      flag: false,
      sum: 0, // 总价,
      bool: true,
      img,
      shangp: []
    }
  },
  methods: {
    // 跳转到商品详情
    toGoodsDetail (gid) {
      this.$router.push('/goods_details')
      localStorage.setItem('goodsID', gid)
    },
    //   返回上一级
    back () {
      this.$router.go(-1) // 返回上一层
    },
    // 全选按钮 取消全选
    abab () {
      if (this.checked === true) {
        let a = []
        // console.log(this.goods)
        for (var i = 0; i < this.goods.length; i++) {
          a.push(this.goods[i].id)
        }
        if (a.length === this.goods.length) {
          this.checkedGoods = a
        }
      } else if (this.checkedGoods.length === 0) {
        this.checkedGoods = []
      } else if (this.checked === false) {
        // this.checkedGoods = []
      }
    },
    // 获取购物车
    async getgw () {
      const { data: res } = await this.$http.get('/gw', { params: { 'user_id': sessionStorage.getItem('userid') } })
      //   console.log(res)

      if (res.ok === 1) {
        this.gw = res.data
        this.goods = res.resu
        // console.log(this.goods)
        this.flag = true
      } else {
        this.flag = false
      }
    },
    // 商品数量步进器
    step (num, id) {
      this.$http.post('/step', { num: num, id: id })
      this.cg()
    },
    cg () {
      this.sum = 0
      // console.log(this.goods)
      // console.log(this.checkedGoods)
      // console.log(thi.gw)

      this.checkedGoods.forEach((element, index) => {
        // console.log(index)

        this.sum += this.gw[index].price * this.gw[index].num
      })
      this.sum *= 100
      // console.log(this.sum)

      localStorage.setItem('sum', this.sum)
      if (this.checkedGoods.length === 0) {
        this.bool = true
      } else {
        this.bool = false
      }
      if (this.checkedGoods.length === this.goods.length) {
        this.checked = true
        localStorage.setItem('checked', 0)
      } else {
        this.checked = false
        localStorage.setItem('checked', 1)
      }
      localStorage.setItem('checkedGoods', JSON.stringify(this.checkedGoods))
    },
    // 购物车删除
    async deletes (id) {
      const { data: res } = await this.$http.delete('/deletes', {
        params: { id: id }
      })
      if (res.ok === 1) {
        this.getgw()
      }
    },
    // 去结算
    onSubmit () {
      localStorage.setItem('address_id', '')
      let c = []
      this.checkedGoods.forEach(element => {
        c.push(element)
      })
      localStorage.setItem('goods_id', c)
      this.$router.push('/order')
    },
    gettj () {
      this.$http.get('/tuij').then(res => {
        // console.log(res.data.data)
        this.shangp = res.data.data
        // console.log(this.shangp)
      })
    }
  },
  created () {
    this.gettj()
    this.getgw()
    const a = JSON.parse(localStorage.getItem('checkedGoods'))
    if (a) {
      this.checkedGoods = a
      const sum = localStorage.getItem('sum')
      if (this.checkedGoods.length === 0) {
        this.bool = true
      } else {
        this.bool = false
      }
      if (sum) {
        this.sum = Number(sum)
      } else {
        this.sum = 0
      }
    } else {
      this.checkedGoods = []
    }
    const checked = localStorage.getItem('checked')
    if (checked === '0') {
      this.checked = true
    } else {
      this.checked = false
    }
  }
}
</script>

<style scoped lang='less'>
.van-nav-bar .van-icon {
  color: #333;
  font-size: 25px;
}
.fat {
  float: left;
  font-weight: 800;
}
.card-goods {
  padding: 10px 0;
  background-color: #fff;
  &__item {
    position: relative;
    background-color: #fafafa;
    .van-checkbox__label {
      width: 100%;
      height: auto; // temp
      padding: 0 10px 0 15px;
      box-sizing: border-box;
    }
    .van-checkbox__icon {
      top: 50%;
      left: 10px;
      z-index: 1;
      position: absolute;
      margin-top: -10px;
    }
    .van-card__price {
      color: #f44;
    }
  }
}
.checkbox {
  margin: 50px 0 0 8px;
}
.btn {
  background: linear-gradient(90deg, #fa1e8c, #fc1e56);
  color: #fff;
  border-radius: 30px 30px;
  width: 100px;
  margin-top: 20px;
}
body{
background-color: #f3f5f7
}
.namelegth {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
